<!--
 * @Author: liuyonghu
 * @Date: 2021-10-12 15:45:53
 * @LastEditTime: 2021-10-12 15:58:17
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: /demos/huizhi/index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
    <title>椭圆的绘制和编辑</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <script src="https://webapi.amap.com/maps?v=2.0&key=b51f90c91151e2b84b435e0f7dbb66a8&plugin=AMap.MouseTool"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <div class="input-card" style="width: 200px">
      <h4 style="margin-bottom: 10px; font-weight: 600">
        绘制覆盖物
      </h4>
      <button class="btn" onclick="drawPolyline()" style="margin-bottom: 5px">
        绘制线段
      </button>
      <button class="btn" onclick="drawPolygon()" style="margin-bottom: 5px">
        绘制多边形
      </button>
      <button class="btn" onclick="drawRectangle()" style="margin-bottom: 5px">
        绘制矩形
      </button>
      <button class="btn" onclick="drawCircle()" style="margin-bottom: 5px">
        绘制圆形
      </button>
    </div>
    <script type="text/javascript">
      function drawPolyline() {
        mouseTool.polyline({
          strokeColor: "#3366FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          // 线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          // strokeDasharray: [10, 5],
        });
      }

      function drawPolygon() {
        mouseTool.polygon({
          strokeColor: "#FF33FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillColor: "#1791fc",
          fillOpacity: 0.4,
          // 线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          // strokeDasharray: [30,10],
        });
      }

      function drawRectangle() {
        mouseTool.rectangle({
          strokeColor: "red",
          strokeOpacity: 0.5,
          strokeWeight: 6,
          fillColor: "blue",
          fillOpacity: 0.5,
          // strokeStyle还支持 solid
          strokeStyle: "solid",
          // strokeDasharray: [30,10],
        });
      }

      function drawCircle() {
        mouseTool.circle({
          strokeColor: "#FF33FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillColor: "#1791fc",
          fillOpacity: 0.4,
          strokeStyle: "solid",
          // 线样式还支持 'dashed'
          // strokeDasharray: [30,10],
        });
      }

      function init() {
        var map = new AMap.Map("container", {
          center: [117.782069, 39.144901],
          zoom: 14,
        });

        window.mouseTool = new AMap.MouseTool(map);

        mouseTool.on("draw", function (event) {
          // event.obj 为绘制出来的覆盖物对象
          const { $x } = event.obj;
          console.log("您绘制的经纬度集合为:\n\n\n" + JSON.stringify($x)+ "\n\n\n");
          log.info("覆盖物对象绘制完成,请在控制台查看输出结果！");
        });
      }

      window.onload = function () {
        init();
      };
    </script>
  </body>
</html>
